<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      // 数据驱动 ，数据优先：关注点放在操作数据上，而不是放在操作dom结构上；

      // 1.获取元素
      // var usernameEle = document.querySelector("#username");
      // var ageEle = document.querySelector("#age");
      // var genderEle = document.querySelector("#gender");
      // var addBtn = document.querySelector("#addBtn");
      // var tbodyEle = document.querySelector("tbody");
      // 立刻获取了input里的值 ，放在username变量里存起来了 ，后面就不会改变了；
      // var username = usernameEle.value;

      // console.log(username);
      // 点击添加的时候获取 学生的信息；
      // addBtn.onclick = function(){
      //     var username = usernameEle.value;
      //     var age = ageEle.value;
      //     var gender = genderEle.value;
      //     // console.log(username,age,gender);
      //     // 模板字符串 可以支持换行；
      //     // var str = "<div>"+
      //     //                 "<span>1</span>"+
      //     //                 "<span>2</span>"+
      //     //           "</div>";
      //     tbodyEle.innerHTML += `<tr>
      //                                 <td>${username}</td>
      //                                 <td>${age}</td>
      //                                 <td>${gender}</td>
      //                                 <td><button>删除</button></td>
      //                           </tr>`;

      // //    获取删除按钮，一定是在删除按钮生成之后；
      //     addDeleEvent();
      // }

      // function addDeleEvent(){
      //     var btns = document.querySelectorAll("td button");
      //     btns.forEach(function(btn){
      //         btn.onclick = function(){
      //             // console.log("点击了删除按钮")
      //             this.parentNode.parentNode.remove();
      //         }
      //     })
      // }

      // 数据驱动；把学生抽象成数据 ，然后通过数据来渲染视图；
      // var arr = [{
      //     name:"张三",
      //     age:20,
      //     gender:"男"
      // },{
      //     name:"李四",
      //     age:22,
      //     gender:"男"
      // },{
      //     name:"王五",
      //     age:21,
      //     gender:"女"
      // }];
      // document.onclick = function(){
      //     renderDom(arr);
      // }
      var usernameEle = document.querySelector("#username");
      var ageEle = document.querySelector("#age");
      var genderEle = document.querySelector("#gender");
      var addBtn = document.querySelector("#addBtn");
      var tbodyEle = document.querySelector("tbody");
      var sortEle = document.querySelector("#sortBtn");
      var arr = [];
      addBtn.onclick = function () {
        var username = usernameEle.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        var obj = {
          name: username,
          age: age,
          gender: gender,
        };
        // console.log(obj)
        arr.push(obj);
        // console.log(arr);
        renderDom(arr);
      };
      // 点击排序的时候
      sortEle.onclick = function () {
        // console.log(arr)
        arr.sort(function (a, b) {
          return a.age - b.age;
        });
        console.log(arr);
        renderDom(arr);
      };

      // 定义一个函数 ；这个函数会根据数据来改变页面里的内容；
      function renderDom(arr) {
        tbodyEle.innerHTML = "";
        arr.forEach(function (item) {
          var tr = document.createElement("tr");
          tr.innerHTML = `<td>${item.name}</td>
                                <td>${item.age}</td>
                                <td>${item.gender}</td>
                                <td><button>删除</button></td>`;
          tbodyEle.appendChild(tr);
        });
      }
    </script>
  </body>
</html>
